Skip to content

Conversation

javoscript
Copy link
Contributor

The problem:
The lookbehind pattern (?<=^|[:=,;\s{()]) doesn't include [ in its character class, so these cases would be missed:

const classes = [clsx('btn', 'primary')]  // ❌ "clsx" not matched
const arr = [cn('text-red-500')]          // ❌ "cn" not matched  

But these would work:

const classes = [ clsx('btn', 'primary')] // ✅ matches (whitespace after [)
const arr = [, cn('text-red-500')]        // ✅ matches (comma before cn)

Why this matters:
Array contexts are common in modern JavaScript/React for combining classes:

const buttonClasses = [clsx(conditionalClasses), baseClasses]
const styles = [cn(variantStyle), defaultStyle]

The Fix:
The regex should include [ in the lookbehind character class:

/(?<=^|[:=,;\s{()\[])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
//               ^ add \[ here

This would ensure we properly detect class utility functions at the beginning of arrays.

@javoscript
Copy link
Contributor Author

Examples:

Not working without the space before the bracket:
Screenshot 2025-07-31 at 20 23 10

Working with the space:
Screenshot 2025-07-31 at 20 23 41

@thecrypticace thecrypticace changed the title Fix class name matching in javascript right after opening square brackets Match class functions that appear after an opening square bracket Aug 1, 2025
@thecrypticace thecrypticace merged commit 5d8b5dc into tailwindlabs:main Aug 1, 2025
12 checks passed
@thecrypticace
Copy link
Contributor

I'd say I can't believe I missed that but… I can. 😅

Thanks! I'll tag a release with the fix tomorrow 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants